<template>
	<div class="container">
		<Category title='美食' >
			<img slot='center' src="https://i0.hdslb.com/bfs/album/c82a0c87c425162d79485cc0e997d8007f8e5352.jpg" >
			<a slot='footer' href="https://space.bilibili.com/485857452?spm_id_from=333.788.0.0" target="_blank" >个人主页</a>
		</Category>
		
		<Category title='游戏' >
			<ul slot='center'>
				<li v-for="(g,index) in games" :key="index">{{g}}</li>
			</ul>
			<div class="foot" slot='footer'>
				<a href="https://space.bilibili.com/485857452?spm_id_from=333.788.0.0" target="_blank" >单机游戏</a>
				<a href="https://space.bilibili.com/485857452?spm_id_from=333.788.0.0" target="_blank" >网络游戏</a>
			</div>
			
		</Category>
		
		<Category title='电影' >
			<ul slot='center'>
				<li v-for="(f,index) in films" :key="index">{{f}}</li>
			</ul>
			<!-- v-slot:footer 仅仅被使用在 template -->
			<template v-slot:footer>
				<div class="foot" >
					<a href="https://space.bilibili.com/485857452" target="_blank" >经典</a>
					<a href="https://space.bilibili.com/485857452" target="_blank" >热门</a>
					<a href="https://space.bilibili.com/485857452" target="_blank" >推荐</a>
				</div>
				<h4 >欢迎前来观影</h4>
			</template>
			
		</Category>
	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
		data(){
			return{
				foods:['烧烤','火锅','麻辣烫','炸串'],
				games:['王者荣耀','原神','贪玩蓝月','方舟·生存进化'],
				films:['《我和我的祖国》','《长津湖》','《柯南》','《这个杀手不太冷》'],
			}
		}
	}
</script>
<style scoped>
	.container,.foot{
		display: flex;
		justify-content: space-around;
	}
	img{
		width: 100%
	}
</style>